<template>
  <div class="goods-detail">
    <!-- 属性 -->
    <ul class="attrs">
      <li v-for="item in goods.details.properties" :key="item.value">
        <!-- 商品的详情属性 -->
        <span class="dt">{{ item.name }}</span>
        <!-- 商品的详情属性具体介绍 -->
        <span class="dd">{{ item.value }}</span>
      </li>
    </ul>
    <!-- 图片 -->
    <img v-for="item in goods.details.pictures" :key="item" :src="item" alt="">
  </div>
</template>
<script lang="ts" setup>
import { inject } from 'vue'
const goods: any = inject('goods')
</script>
<style  lang="less" scoped>
.goods-detail {
  padding: 40px;
  box-sizing: content-box;

  .attrs {
    display: flex;
    flex-wrap: wrap;

    border: 0;
    margin-bottom: 30px;

    li {
      display: flex;
      margin-top: 10px;
      padding-right: 5px;
      width: 50%;

      .dt {

        width: 100px;
        color: #999;
      }

      .dd {
        flex: 1;
        color: #666;
      }
    }
  }

  >img {
    width: 100%;
  }
}
</style>